<script setup lang="ts">
defineProps<{
  title: string
  headBackgroundImage?: string
}>()
</script>

<template>
  <div class="d-flex flex-column block-item">
    <div
      class="flex-shrink-0 item-head"
      :style="{
        backgroundImage: headBackgroundImage && `url(${headBackgroundImage})`,
      }"
    >
      <slot name="title">
        {{ title }}
      </slot>
    </div>
    <div class="flex-fill item-body">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.item-head {
  width: 100%;
  background-image: url('./label-bg.png');
  background-repeat: no-repeat;
  background-position: left center;
  color: #d9eaf5;
  font-weight: 600;
  font-size: 16px;
  font-style: italic;
  letter-spacing: 1px;
  padding: 12px 16px 14px 50px;
  line-height: 1;
}
</style>
